﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>jquery滚动条jscroll美化滚动条,自定义滚动条_WinWill-我的个人门户|ycqc|关注|资讯|资料库|文档库|作品库|图片|视界|留言板|Office online|My mail</TITLE>
<STYLE>BODY {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #666666; LINE-HEIGHT: 20px; PADDING-TOP: 10px
}
P.text {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; BACKGROUND: #f5f5f5; PADDING-BOTTOM: 10px; MARGIN: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid
}
.fontRed {
	COLOR: #ff0000
}
.title {
	PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-WEIGHT: bold; FONT-SIZE: 14px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial
}
.demo {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1px; FONT-SIZE: 12px; PADDING-BOTTOM: 1px; MARGIN: 30px; BORDER-LEFT: #ccc 1px solid; WIDTH: 500px; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px solid
}
.demo2 {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1px; BACKGROUND: #fff; PADDING-BOTTOM: 1px; MARGIN: 20px; BORDER-LEFT: #ccc 1px solid; WIDTH: 700px; PADDING-TOP: 1px; BORDER-BOTTOM: #ccc 1px solid
}
.logo H1 {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 20px; PADDING-TOP: 0px; HEIGHT: 1px
}
.footer H1 {
	PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; LINE-HEIGHT: 20px; PADDING-TOP: 0px; HEIGHT: 1px
}
.footer {
	BORDER-TOP: #ccc 1px dotted; BACKGROUND: #efefef; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
.footer .copyRight {
	PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 11px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px
}
.footer .copyRight P A {
	TEXT-DECORATION: none
}
PRE.text {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 10px; BACKGROUND: #f5f5f5; PADDING-BOTTOM: 10px; MARGIN: 10px; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #ccc 1px solid
}
.img {
	BORDER-RIGHT: #efefef 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #efefef 1px solid; PADDING-LEFT: 1px; BACKGROUND: #fff; PADDING-BOTTOM: 1px; MARGIN: 0px 0px 0px 20px; BORDER-LEFT: #efefef 1px solid; WIDTH: 99px; PADDING-TOP: 1px; BORDER-BOTTOM: #efefef 1px solid
}
#tt {
	BACKGROUND: #f5f5f5; HEIGHT: 100px
}
#cc {
	BACKGROUND: #f5f5f5; HEIGHT: 100px
}
#ee {
	BACKGROUND: #f5f5f5; HEIGHT: 100px
}
.download {
	PADDING-RIGHT: 20px; PADDING-LEFT: 20px; FONT-SIZE: 18px; PADDING-BOTTOM: 20px; PADDING-TOP: 20px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
</STYLE>

<SCRIPT language=javascript  src="images/jquery.js"></SCRIPT>

<SCRIPT language=javascript  src="images/jscroll.js"></SCRIPT>

<SCRIPT type=text/javascript>
/*--------------------------------------------------------------------------------------------------*/
$(document).ready(function(){
	$("#tt").jscroll();
	$("#cc").jscroll({W:"12px"});
	$("#ee").jscroll({W:"12px",Btn:{btn:false}});
	
/*---------------------------------------------------------以下为自定义滚动条样式，设置时注意逗号--------------*/
	$(".dd").jscroll({ W:"15px"//设置滚动条宽度
					,BgUrl:"url(images/s_bg.gif)"//设置滚动条背景图片地址
					,Bg:"right 0 repeat-y"//设置滚动条背景图片position,颜色等
					,Bar:{Pos:"bottom"//设置滚动条初始化位置在底部
						 ,Bd:{Out:"#bcbcbc",Hover:"#ccc"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
						 ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
					,Btn:{btn:true//是否显示上下按钮 false为不显示
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}//设置上按钮背景：鼠标离开(默认)，经过，点击
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
					,Fn:function(){}//滚动时候触发的方法
					});

	$(".ff").jscroll({ W:"15px"
					,BgUrl:"url(images/s_bg2.gif)"
					,Bg:"right 0 repeat-y"
					,Bar:{Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
						 ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
					,Btn:{btn:true
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
					,Fn:function(){}
					});

	$(".gg").jscroll({ W:"15px"
					,BgUrl:"url(images/s_bg3.gif)"
					,Bg:"right 0 repeat-y"
					,Bar:{Bd:{Out:"#bcbcbc",Hover:"#ccc"}
						 ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
					,Btn:{btn:true
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
					,Fn:function(){}
					});

	$(".hh").jscroll({ W:"15px"
					,BgUrl:"url(images/s_bg4.gif)"
					,Bg:"right 0 repeat-y"
					,Bar:{Bd:{Out:"#bcbcbc",Hover:"#ccc"}
						 ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
					,Btn:{btn:true
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
					,Fn:function(){}
					});


	$(".ii").jscroll({ W:"15px"
					,BgUrl:"url(images/s_bg5.gif)"
					,Bg:"right 0 repeat-y"
					,Bar:{Bd:{Out:"#064697",Hover:"#064697"}
						 ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
					,Btn:{btn:true
						 ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
						 ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
					,Fn:function(){}
					});

});
</SCRIPT>

<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>
<P class=text><B>可以自由的给滚动条定义背景，上下按钮，当然不仅仅是颜色，连图片当背景也可以。</B><SPAN 
class=fontRed>支持鼠标滚轮，点击滚动条滚轴定位，上下按钮久按加速，兼容firefox,谷歌</SPAN></P>
<P class=text>$("#tt").jscroll();//默认调用 </P>
<P class=title>demo:</P>
<DIV class=demo>
<DIV id=tt>
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px">
<P>此处id为dd</P>
<P>www.winwill.com</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P></DIV></DIV></DIV>
<P class=text>$("#cc").jscroll({W:"12px"});//设置了滚动条宽度</P>
<P class=title>demo:</P>
<DIV class=demo>
<DIV id=cc>
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><B>顶部</B> 

<P>此处id为cc</P>
<P>www.winwill.com</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P><B>底部</B> </DIV></DIV></DIV>
<P 
class=text>$("#ee").jscroll({W:"12px",Btn:{btn:false}});//设置了滚动条宽度,去掉了上下按钮,比有按钮好看多了，当然按钮是为了设置背景用的hoho</P>
<P class=title>demo:</P>
<DIV class=demo>
<DIV id=ee>
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><B>顶部</B> 

<P>此处id为ee</P>
<P>www.winwill.com</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P><B>底部</B> </DIV></DIV></DIV>
<P 
style="MARGIN-LEFT: 10px; TEXT-ALIGN: left">/*-----------------以下为自定义滚动条样式，设置时注意逗号--------------*/</P><PRE class=text>  $(".dd").jscroll({ W:"12px"//设置滚动条宽度
	,BgUrl:""//设置滚动条背景图片地址
	,Bg:"#ccc"//设置滚动条背景图片position,颜色等
	,Bar:{  Pos:"bottom"//设置滚动条初始化位置在底部
			,Bd:{Out:"#000",Hover:"red"}//设置滚动滚轴边框颜色：鼠标离开(默认)，经过
			,Bg:{Out:"green",Hover:"#fff",Focus:"orange"}}//设置滚动条滚轴背景：鼠标离开(默认)，经过，点击
	,Btn:{  btn:true//是否显示上下按钮 false为不显示
			,uBg:{Out:"black",Hover:"#fff",Focus:"orange"}//设置上按钮背景：鼠标离开(默认)，经过，点击
			,dBg:{Out:"black",Hover:"#fff",Focus:"orange"}}//设置下按钮背景：鼠标离开(默认)，经过，点击
	,Fn:function(){}//滚动时候触发的方法
	});
</PRE>
<P class=title>demo:(滚轴初始化位置：底部)</P>
<DIV class=img><IMG alt=所用图片 
src="images/s_bg.gif" 
border=0></DIV>
<DIV class=demo2><!--加条线 好看点 哈哈-->
<DIV class=dd style="HEIGHT: 200px"><!--padding会被取消-->
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><!--padding这里设置--><B>顶部</B> 

<P>此处class为dd</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>测试文字</P>
<P>此处class为dd</P>
<P>www.winwill.com</P><B>底部</B> </DIV></DIV></DIV>
<DIV class=img><IMG alt=所用图片 
src="images/s_bg2.gif" 
border=0></DIV>
<DIV class=demo2><!--加条线 好看点 哈哈-->
<DIV class=ff style="HEIGHT: 200px"><!--padding会被取消-->
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><!--padding这里设置--><PRE style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #4174a3; PADDING-TOP: 0px">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
 $(".ff").jscroll({
   W:"15px"
  ,BgUrl:"url(images/s_bg2.gif)"
  ,Bg:"right 0 repeat-y"
  ,Bar:{Pos:"bottom"
        ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
        ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
        ,Btn:{btn:true
              ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
              ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
  ,Fn:function(){}
 });
});
&lt;/script&gt;</PRE></DIV></DIV></DIV>
<DIV class=img><IMG alt=所用图片 
src="images/s_bg3.gif" 
border=0></DIV>
<DIV class=demo2 style="BACKGROUND: #fff">
<DIV class=gg style="HEIGHT: 200px"><!--padding会被取消-->
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><!--padding这里设置--><PRE style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #b5b5b5; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
 $(".ff").jscroll({
   W:"15px"
  ,BgUrl:"url(images/s_bg3.gif)"
  ,Bg:"right 0 repeat-y"
  ,Bar:{Pos:"bottom"
        ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
        ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
        ,Btn:{btn:true
              ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
              ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
  ,Fn:function(){}
 });
});
&lt;/script&gt;</PRE></DIV></DIV></DIV>
<DIV class=img><IMG alt=所用图片 
src="images/s_bg4.gif" 
border=0></DIV>
<DIV class=demo2 style="BACKGROUND: #081622">
<DIV class=hh style="HEIGHT: 200px"><!--padding会被取消-->
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><!--padding这里设置--><PRE style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #b5b5b5; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
 $(".hh").jscroll({
   W:"15px"
  ,BgUrl:"url(images/s_bg4.gif)"
  ,Bg:"right 0 repeat-y"
  ,Bar:{Pos:"bottom"
        ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
        ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
        ,Btn:{btn:true
              ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
              ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
  ,Fn:function(){}
 });
});
&lt;/script&gt;</PRE></DIV></DIV></DIV>
<DIV class=img><IMG alt=所用图片 
src="images/s_bg5.gif" 
border=0></DIV>
<DIV class=demo2 style="BACKGROUND: #004fb1">
<DIV class=ii style="HEIGHT: 200px"><!--padding会被取消-->
<DIV 
style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; PADDING-TOP: 5px"><!--padding这里设置--><PRE style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #b5b5b5; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif">&lt;script type="text/javascript"&gt;
$(document).ready(function(){
 $(".ii").jscroll({
   W:"15px"
  ,BgUrl:"url(images/s_bg5.gif)"
  ,Bg:"right 0 repeat-y"
  ,Bar:{Pos:"bottom"
        ,Bd:{Out:"#a3c3d5",Hover:"#b7d5e6"}
        ,Bg:{Out:"-45px 0 repeat-y",Hover:"-58px 0 repeat-y",Focus:"-71px 0 repeat-y"}}
        ,Btn:{btn:true
              ,uBg:{Out:"0 0",Hover:"-15px 0",Focus:"-30px 0"}
              ,dBg:{Out:"0 -15px",Hover:"-15px -15px",Focus:"-30px -15px"}}
  ,Fn:function(){}
 });
});
&lt;/script&gt;</PRE></DIV></DIV></DIV>
<DIV class=download><A 
href="images/jquery.js">下载--&gt;jquery.js</A></DIV>
<DIV class=download><A 
href="images/jscroll.js">下载--&gt;jscroll.js(依赖于jquery.js)</A></DIV></BODY></HTML>
